<template>
    <div class="product-assembly">
        <div class="product-title">
            <div class="title">
                <span>{{ title }}</span>
            </div>
        </div>
        <div class="assembly-box">
            <el-collapse v-model="activeNames">
                <el-collapse-item
                    v-for="(item, index) in configureData"
                    :key="index"
                    :title="item.title"
                    :name="item.id"
                    class="collapse-item"
                >
                    <div class="collapse-content">
                        <div
                            v-for="(
                                item_content, index_content
                            ) in item.content_arr"
                            :key="index_content"
                            class="collapse-box"
                            :class="
                                item_content.operation_type == 2
                                    ? 'pointer'
                                    : ''
                            "
                            @click="openDialogFun(item_content)"
                        >
                            <div class="collapse-left">
                                <span class="title">{{
                                    item_content.title
                                }}</span
                                ><span class="explain">{{
                                    item_content.operation_type == 1
                                        ? item_content.explain
                                        : item_content.explain_type == 0
                                        ? item_content.explain_0
                                        : item_content.explain_type == 1
                                        ? item_content.explain_1
                                        : item_content.explain_2
                                }}</span>
                            </div>
                            <div class="collapse-right">
                                <el-switch
                                    v-model="item_content.is_switch"
                                    active-color="#3388ff"
                                    inactive-color="#dcdfe6"
                                    active-value="1"
                                    inactive-value="2"
                                    v-if="item_content.operation_type == 1"
                                    @change="
                                        setConfigureSwitch(item_content, $event)
                                    "
                                >
                                </el-switch>
                                <i v-else class="el-icon-caret-right"></i>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 单位 -->
        <company
            ref="company"
            :datatype="datatype"
            @setConfigureSwitch="setConfigureSwitch"
        ></company>
        <!-- 价格/成本 -->
        <commodityPrice
            ref="commodityPrice"
            :datatype="datatype"
            @setConfigureSwitch="setConfigureSwitch"
        ></commodityPrice>
        <!-- 品牌 -->
        <commodityBrand
            ref="commodityBrand"
            :datatype="datatype"
            @setConfigureSwitch="setConfigureSwitch"
        ></commodityBrand>
        <!-- 分类 -->
        <classification
            ref="classification"
            :datatype="datatype"
        ></classification>
        <!-- 标签 -->
        <productLabel
            ref="productLabel"
            @setConfigureSwitch="setConfigureSwitch"
            :datatype="datatype"
        ></productLabel>

        <!-- 详情 -->
        <moreDetails
            ref="moreDetails"
            @setConfigureSwitch="setConfigureSwitch"
            :datatype="datatype"
        ></moreDetails>
        <!-- 规格 -->
        <specifications
            ref="specifications"
            @setConfigureSwitch="setConfigureSwitch"
        ></specifications>
        <!-- 服务配置剩下 标签 详情 有效期 -->
    </div>
</template>

<script>
import configureData from "@/js/gd/configureData.js";
import config from "@/js/conf/Config.js";
import LocalStore from "@/js/LocalStore.js";
import specifications from "@/components/product-config/specifications.vue";
import classification from "@/components/product-config/classification.vue";
import company from "@/components/product-config/company.vue";
import productLabel from "@/components/product-config/productLabel.vue";
import commodityPrice from "@/components/product-config/commodityPrice.vue";
import moreDetails from "@/components/product-config/moreDetails.vue";
import commodityBrand from "@/components/product-config/commodityBrand.vue";

export default {
    name: "productAssembly",
    components: {
        specifications,
        classification,
        company,
        productLabel,
        commodityPrice,
        moreDetails,
        commodityBrand,
    },
    props: ["datatype"],
    data() {
        return {
            activeNames: ["1", "2", "3", "4", "5"], //默认展开折叠面板的下标
            configureData: [],
            cpInfo: LocalStore.getCpInfo,
            tpl_data: {},
            dialog_title: "",
            dialog_width: "50%",
            title: "",
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.getTplListFun();
            this.setTypeDataFun();
        },
        setTypeDataFun() {
            const type = this.datatype;
            if (type == 1) {
                this.configureData = configureData.gdconfigData;
                this.title = "产品模板配置";
            } else if (type == 2) {
                this.configureData = configureData.pjconfigData;
                this.title = "服务模板配置";
            }
        },
        // 打开弹框
        openDialogFun(item) {
            if (item.operation_type == 1) return;
            const title = item.title;
            const _refs = this.$refs;
            if (title === "规格") {
                _refs.specifications.is_dialog = true;
                _refs.specifications.is_switch = this.tpl_data.spec;
            } else if (title === "单位") {
                _refs.company.is_dialog = true;
                _refs.company.is_switch = this.tpl_data.unit;
                if (_refs.company.list_data.length == 0) {
                    _refs.company.getListFun();
                }
            } else if (title === "价格") {
                _refs.commodityPrice.is_dialog = true;
                _refs.commodityPrice.priceType = this.tpl_data.price_quote_type;
                _refs.commodityPrice.is_switch = this.tpl_data.pricec;
                _refs.commodityPrice.initData("1");
                _refs.commodityPrice.getListFun();
            } else if (title === "成本") {
                _refs.commodityPrice.is_dialog = true;
                _refs.commodityPrice.priceType = this.tpl_data.cost_quote_type;
                _refs.commodityPrice.is_switch = this.tpl_data.cost;
                _refs.commodityPrice.initData("2");
                _refs.commodityPrice.getListFun();
            } else if (title === "品牌") {
                _refs.commodityBrand.is_dialog = true;
                _refs.commodityBrand.is_modify_dialog = "0";
                _refs.commodityBrand.brand = this.tpl_data.brand;
                _refs.commodityBrand.brand_m = this.tpl_data.brand_m;
            } else if (title === "分类") {
                _refs.classification.is_dialog = true;
                if (_refs.classification.catlsData_1.length == 0) {
                    _refs.classification.getCatlsDataFun();
                }
            } else if (title === "标签") {
                _refs.productLabel.is_dialog = true;
                _refs.productLabel.is_switch = this.tpl_data.tag;
                _refs.productLabel.initData("1");
            } else if (title === "有效期") {
                _refs.productLabel.is_dialog = true;
                _refs.productLabel.is_switch = this.tpl_data.outday;
                _refs.productLabel.initData("2");
            } else if (title === "详情") {
                _refs.moreDetails.is_dialog = true;
                if (_refs.moreDetails.list_data.length == 0) {
                    _refs.moreDetails.getListFun();
                }
            }
        },
        // 请求产品配置信息
        async getTplListFun() {
            let url =
                this.datatype == 1
                    ? config.GOODS_TPL_LIST
                    : config.GDTPL_TPL_INFO;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (!res || !res.data) return;
            this.tpl_data = this.datatype == 1 ? res.data : res.data.tpl_info;
            this.setConfigureData(this.tpl_data);
        },
        // 初始接口数据给到页面
        setConfigureData(data) {
            this.configureData.map((v) => {
                v.content_arr.map((vs) => {
                    for (var key in data) {
                        if (vs.key == key) {
                            if (vs.operation_type == 1) {
                                vs.is_switch = data[key];
                            } else {
                                vs.explain_type = data[key];
                            }
                        }
                    }
                });
            });
        },
        // 请求设置开关按钮
        async setConfigureSwitch(data, val) {
            let url =
                this.datatype == 1
                    ? config.GOODS_TPL_SAVE
                    : config.GDTPL_TPL_SAVE;
            let param = {
                id: this.tpl_data.id,
                fields: data.key,
                fields_value: val,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.$msg({ title: "保存成功" });
            }
            if (data.is_updata) {
                this.getTplListFun();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.product-assembly {
    height: 100%;
    .product-title {
        height: 50px;
        border-bottom: 1px #efdede solid;
        display: flex;
        align-items: center;
        padding-left: 10px;
        .title {
            font-size: 18px;
            font-weight: bold;
        }
    }
    .assembly-box {
        height: 90%;
        padding: 30px 40px;
        padding-bottom: 100px;
        overflow: auto;
        ::v-deep.el-collapse {
            border: none;
        }
        ::v-deep.collapse-item {
            margin-top: 20px;

            &:first-child {
                margin: 0;
            }
            .el-collapse-item__header {
                padding-left: 20px;
                background: #fbfbff;
                font-size: 16px;
                font-weight: bold;
            }
            .el-collapse-item__wrap {
                // border: none;
                .el-collapse-item__content {
                    // padding-left: 20px;
                    padding-bottom: 0;
                }
            }

            .collapse-content {
                padding: 10px 0;
                .collapse-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 40px;
                    padding: 0 20px;
                    border: 1px #efdede solid;
                    border-radius: 5px;
                    margin-bottom: 10px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &.pointer {
                        cursor: pointer;
                        &:hover {
                            background: #fbfbff;
                        }
                    }
                    .collapse-left {
                        .title {
                            font-size: 14px;
                            font-weight: bold;
                            margin-right: 30px;
                        }
                        .explain {
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                    .collapse-right {
                    }
                }
            }
        }
        .assembly {
        }
    }
}
</style>